<template>
  <div class="sort">
    <SortHead></SortHead>
    <div class="all">
      <div class="list" ref="scroll">
        <div class="scroll-content">
          <span
            :class="{active:state===item.category_name,unactive:state!==item.category_name}"
            v-for="item in sort.data"
            @click="move"
            :key="item.category_id"
            :ref="item.category_name"
          >{{item.category_name}}</span>
        </div>
      </div>
      <div class="content" v-if="setShow" ref="conScroll">
        <div>
          <div v-for="item in sort.data" :key="item.category_id" :id="item.category_name">
            <div class="eachItem" v-for="(n,index) in item.category_list" :key="index">
              <img
                v-if="n.view_type==='cells_auto_fill'"
                class="headImg"
                :src="n.body.items[0].img_url_webp"
                alt
              />
              <h3 v-if="n.body.category_name">{{n.body.category_name}}</h3>
              <div v-if="n.view_type==='category_group'" class="imgs">
                <div v-for="(img,index) in n.body.items" :key="index">
                  <img class="smallImg" :src="img.img_url_webp" alt />
                  <p>{{img.product_name}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SortHead from "./sort/SortHead.vue";
import BScroll from "@better-scroll/core";
import { get } from "@/api/http";
export default {
  data() {
    return {
      sort: { code: "0", data: [] },
      state: "小米手机"
    };
  },
  components: {
    SortHead
  },
  computed: {
    setShow() {
      return this.sort.data.length;
    },
    getImg() {
      return this.sort.data[0].category_list
        ? this.sort.data[0].category_list[0].body.items[0].img_url_webp
        : "";
    }
  },
  async created() {
    let res = await get("data/sort.json");
    console.log(res.data.data[0].category_list[0].body.items[0].img_url_webp);
    this.sort = res.data;
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        scrollY: true,
        click: true,
        probeType: 3
      });
      this.scroll = new BScroll(this.$refs.conScroll, {
        scrollY: true,
        click: true,
        probeType: 3
      });
    },
    move(event) {
      let i = event.srcElement.innerHTML;
      this.state = i;
      this.scroll.scrollToElement(document.getElementById(i), 300);
    }
  }
};
</script>

<style lang="scss" scoped>
.sort {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.list {
  height: 100%;
  width: 88px;
  padding: 10px 15px 10px 10px;
  overflow: auto;
  .scroll-content {
    padding: 15px 0;
  }
  span {
    display: block;
    color: #3c3c3c;
    height: 35px;
    font-size: 14px;
    text-align: center;
  }
  .active {
    color: #fb7d34;
    font-size: 17px;
  }
  .unactive {
    color: #3c3c3c;
    font-size: 14px;
  }
}
.all {
  flex: 1;
  overflow: auto;
  display: flex;
  background: white;
}
.content {
  height: 100%;
  overflow: auto;
  flex: 1;
  h3 {
    text-align: center;
    height: 66px;
    margin-top: 8px;
    line-height: 66px;
    font-size: 14px;
    font-weight: 500;
  }
  .imgs {
    display: flex;
    flex-wrap: wrap;
    div {
      width: 33%;
      text-align: center;
      margin-bottom: 10px;
    }
    p {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.54);
      margin-top: 15px;
    }
  }
  .smallImg {
    width: 52px;
    height: 52px;
  }
  .headImg {
    width: 260px;
  }
}
</style>